import { getSearchResult } from "@/store/actions/search";
import { useInitialState } from "@/utils/use-initial-state";
import React from "react";
import { useLocation, useHistory } from "react-router-dom";
import { Articles, SearchResultResponse } from "@/types/data"; // 根据实际情况导入所需类型定义
import { Loading } from "antd-mobile";
function Result() {
  const history = useHistory();
  const location = useLocation();
  const params = new URLSearchParams(location.search);

  const q = params.get("q") ?? "";
  const { searchResults }: any = useInitialState(
    () => getSearchResult(q),
    "search"
  );
  const { results } = searchResults;
  const renderArticleList = () => {
    // 根据搜索结果的数据结构进行渲染
    return searchResults.results.map((article: Articles["results"][0]) => (
      <div
        key={article.art_id}
        style={{
          borderBottom: "1px solid #ccc",
          margin: "10px 0",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
        }}
      >
        <h3>{article.title}</h3>
        <div style={{ display: "flex" }}>
          {article.cover &&
            article.cover.images &&
            article.cover.images.length > 0 && (
              <div
                className="image-container"
                style={{
                  display: "flex",
                  justifyContent: "flex-end",
                  width: "100%",
                }}
              >
                {article.cover.images.map((image: string, index: number) => (
                  <img
                    key={index}
                    src={image}
                    alt={`Article Cover ${index + 1}`}
                    style={{
                      display: "flex",
                      width: "130px",
                      margin: "0 5px",
                      height: "70px",
                    }}
                  />
                ))}
              </div>
            )}
        </div>
        <div style={{ display: "flex" }}>
          <p>{article.aut_name}</p>
          <p>评论{article.comm_count}</p>
          <p>时间{article.pubdate}</p>
        </div>
        {/* 根据实际需求渲染其他信息 */}
      </div>
    ));
  };

  return (
    <div>
      <div style={{marginTop:'40px'}}>{renderArticleList()}</div>
      <div
        style={{
          position: "absolute",
          top: "0",
          left: "0",
          alignItems: "center",
          display: "flex",
          height: "40px",
          width: "100%",
        }}
      >
        <span
          onClick={() => history.push("/home/index")}
          style={{ display: "flex", fontSize: "20px" }}
        >
          &lt;
        </span>
        <span
          style={{ display: "flex", width: "100%", justifyContent: "center" }}
        >
          搜索结果
        </span>
      </div>
    </div>
  );
}

export default Result;
